<template>
	<view class="correct-error-box">
		<view class="content">
			<view class="error-type1">
				<view class="error-title">
					<text class="symbool">*</text>问题分类<text class="tips">（请选择问题类型，以便我们更好的定位问题）</text>
				</view>
				<view class="error-detail">
					<view class="detail" v-for="(item,index) in errorType" :class="{'cur':item.checked == true}"
					 :key="item.key" @click="errorTypeClick(item.key,item.typeName)">
						{{item.typeName}}
					</view>
					
				</view>
				
			</view>
			<view class="error-type2">
				<view class="error-title">
					<text class="symbool">*</text>问题反馈
				</view>
				<view class="question-cont">
					<textarea 
					class="question-input"
					:placeholder-style=questionPlaceholderStyle 
					placeholder="请输入您要反馈的问题～"
					v-model="questionVal"
					maxlength="200"
					auto-height
					@focus="questionInputFocus"
					@input="questionInputChange"
					@blur="questionInputBlur"
					/>
					<view class="word-count-box"><text>{{countLen}}</text>/200</view>
				</view>
				<view class="describe-quesiton" v-if="describeQuesiton">请简要描述您需要反馈的问题</view>	
			</view>
			<view class="error-type3">
				<view class="error-title">
					问题图片
				</view>
				<view class="upload-box">
					<view class="upload-list-box">
						<view class="upload-img-box">
							<view v-for="(item,index) in uploadImgUrl" :key="index" class="imglistA">
								<img :src="item" alt="" @click="imgck(index,uploadImgUrl)" class="scale-img">
								<span class='colse' @click='colseImg(index)'>
									<image src="https://cdndoc.bj.xdf.cn/student/images/workDetails_close.png" alt=""></image> 
								</span>
							</view>
							<view class="upload-contrl-box" v-if="uploadImgUrl.length < 5">
								<upload-file :url="url" :textName="uploadtName" :uploadArr="uploadImgUrl" @imgListUrl='imgListUrl'></upload-file>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="error-type4">
				<view class="error-title">
					联系方式
				</view>
				<view class="email">wangsiwei2@xdf.cn您可通过此邮件与我们取得联系。</view>
			</view>
			
		</view>
		<view class="submit-btn-box">
			<button @click="submitError" :disabled="isSubmit">提交</button>
		</view>
	</view>
</template>
<script>
	import {apiFeedbacksave} from "@/api/system/index.js"
	export default{
		data(){
			return {
				errorType:[
					{typeName:"内容错误",key:1,checked:false},
					{typeName:"功能异常",key:2,checked:false},
					{typeName:"优化建议",key:3,checked:false},
					{typeName:"其他",key:4,checked:false},
					
				],
				questionVal:"",
				countLen:0,
				questionPlaceholderStyle:"color:#DBDDDF",
				uploadImgUrl:[], //图片路径
				uploadtName:"问题截图",
				isSubmit:false,
				saveErrorType:[],
				describeQuesiton:false,
                url: ''
			}
			
		},
        onLoad() {
            if(process.env.NODE_ENV == 'development'){
            	this.url = "https://bjielts-t.test.xdf.cn/test-api/user/feedback/upload/file"
            } else {
            	this.url = "https://bjielts.xdf.cn/prod-api/user/feedback/upload/file"
            }
        },
		methods:{
			errorTypeClick(key,typeName){
				this.errorType.forEach((item,index)=>{
					if(item.key == key){
						if(!item.checked){
							item.checked = true;
						}
					}else{
						item.checked = false;
					}
				})
			},
			questionInputFocus(){
				
			},
			questionInputChange(e){
				this.questionVal =  e.detail.value;
				this.countLen = this.questionVal.slice(0,200).length;
				if(this.questionVal == ""){
					this.describeQuesiton = true;
				}else{
					this.describeQuesiton = false;
				}
				
			},
			questionInputBlur(e){
				e.detail.value = e.detail.value.replace(/^\s*/, '');
				this.questionVal = e.detail.value;
				if(this.questionVal == ""){
					this.describeQuesiton = true;
				}else{
					this.describeQuesiton = false;
				}
			},
			imgListUrl(urls){
				this.uploadImgUrl.push(urls);
				
			},
			colseImg(index){
				this.uploadImgUrl.splice(index, 1)
			},
			imgck(index,imgArray){
				uni.previewImage({
					current:index,
					urls: imgArray,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			submitError(){
				//校验
				let count = 0;
				let type=""
				this.errorType.forEach((item,index)=>{
					if(item.checked){
						count++
						type = item.key
					}
				})
				if(count==0){
					uni.showToast({
						title: '请选择问题分类',
						icon: 'none'
					})
					return
				}
				if(this.questionVal == ""){
					uni.showToast({
						title: '请输入问题反馈',
						icon: 'none'
					})
					this.describeQuesiton = true;
					return
				}
				let postData = {
					type:type,
					context:this.questionVal,
					pics:this.uploadImgUrl
					
				}
				this.$tip.loading();
				apiFeedbacksave(postData).then((res)=>{
					if(res.code == 200){
						this.$tip.loaded();
						uni.showToast({
							title: '提交成功，感谢您的反馈， 我们将尽快处理',
							icon: 'none',
							success:function(){
								setTimeout(()=>{
									uni.switchTab({
										url: '/pages/user/index'
									});
								},1000);
							}
						})
					}
					
				}).catch((error)=>{
					this.$tip.loaded();
					this.$tip.toast(error.msg);
				})
			}
			
		}
		
	}
	
</script>

<style scoped lang="scss">
    @function torem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
	.correct-error-box{
		width:100%;
		height: 100%;
		box-sizing: border-box;
		padding: torem(30);
		background: #EFF5FC;
		.content{
			background-color: #fff;
			border-radius: torem(8);
			padding:torem(30);
			.error-type1,.error-type2{
				.error-title{
					font-size:torem(28);
					color: #191A1A;
					.symbool{
						color:#FF5850;
						
					}
					.tips{
						color:#999;
						font-size: torem(24);
					}
				}
				.error-detail{
					display: flex;
					margin-top:torem(20);
					justify-content: space-between;
					.detail{
						width: torem(140);
						height: torem(58);
						line-height: torem(58);
						text-align: center;
						background: #FFFFFF;
						border: 1px solid #ECECEC;
						border-radius: torem(8);
						font-size: torem(24);
						color:#666;
					}
					.cur{
						background-color: #FD453D;
						color:#fff;
						border-color: #FD453D;
					}
					
				}
				
			}
			.error-type2{
				margin-top:torem(30);
				.question-cont{
					border: 1rpx solid #ccc;
					width:100%;
					min-height: torem(250);
					margin-top:torem(20);
					position: relative;
					padding:torem(10) torem(10);
					box-sizing: border-box;
					border-radius: torem(8);
					font-size: torem(28);
					padding-bottom:torem(60);
					.question-input{
						
					}
					.word-count-box{
						position: absolute;
						right:torem(10);
						bottom:torem(10);
						color:#ccc;
						font-size: torem(24);
						
					}
					
				}
				.describe-quesiton{
					color:#FF5850;
					font-size: torem(24);
					margin-top:torem(10);
				}
				
			}
			.error-type3{
				margin-top:torem(30);
				.error-title{
					font-size:torem(28);
					color: #191A1A;
				}
				.upload-box{
					margin-top:torem(20);
					overflow: hidden;
					.upload-list-box{
						float: left;
						.upload-img-box{
							display: flex;
							flex-wrap: wrap;
							.imglistA{
								position: relative;
								margin-right: torem(15);
								width: torem(150);
								height: torem(150);
								margin-bottom:torem(10);
								.scale-img{
									width: torem(150);
									height: torem(150);
								}
								.colse{
									position: absolute;
									right:torem(10);
									top: torem(10);
									width: torem(30);
									height: torem(30);
									display: flex;
									align-items: center;
									justify-content: center;
									image{
										width: torem(30);
										height: torem(30);
									}
								}
							}
						}
					}
					.upload-contrl-box{
						width: torem(150);
						height: torem(150);
						background: #F4F5F7;
						border-radius: torem(8);
						text-align: center;
						color: #999999;
						float: left;
						img{
							width:torem(48);
							height:torem(44);
							margin-top:torem(45);
						}
					}
				}
			}
			.error-type4{
				margin-top:torem(40);
				.error-title{
					font-size:torem(28);
					color: #191A1A;
				}
				.email{
					font-size: torem(24);
					color: #666666;
				}
				
					
			}
			
		}
		.submit-btn-box{
			position: fixed;
			left:0rpx;
			bottom: torem(20);
			width: 100%;
			z-index: 99;
			button{
				width: torem(646);
				height: torem(82);
				background: #FD453D;
				border-radius: torem(41);
				margin:auto;
				color:#fff;
				border:none;
				outline: none;
			}
			
			
		}
	}
	
</style>
